<template>
  <div class="spell-one-letter spell-one-word">
    <h4 class="spell-title">字母解说</h4>
    <div class="one-word-contain">
      <div class="one-word-contain-left mr30">
        <div class="contain-word">
          <span
            class="letter-text"
            :id="`letter-text-${this.letterData.id}`"
            :style="`font-size:${wordFontSize}`"
            >{{ letterData.content }}</span
          >
        </div>
        <div class="contain-audio">
          <AudioPlay
            :type="1"
            :audioSrc="baseURL + letterData.audio"
            :ref="'audioPlay'"
          ></AudioPlay>
        </div>
      </div>
      <div class="one-word-contain-right">
        <p class="letter-contain">
          <span v-html="letterData.parse"></span>
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import AudioPlay from "@/components/AudioPlay.vue";
export default {
  data() {
    return {
      wordFontSize: "20px",
    };
  },
  computed: {},
  props: {
    letterData: {
      type: Object,
    },
  },
  methods: {
    setWordFontSize() {
      if (this.letterData.content.length <= 2) {
        this.wordFontSize = `${200 - this.letterData.content.length * 40}px`;
        return;
      }
      let wordDom = document.getElementById(
        `letter-text-${this.letterData.id}`
      );
      if (!wordDom) {
        return;
      }

      var hdWidth = 240;
      var textWidth = wordDom.offsetWidth;
      var scale = hdWidth / textWidth;
      //   scale > 30 ? (scale = 30) : false;
      this.wordFontSize = scale * 100 + "%";
    },
  },
  components: {
    AudioPlay,
  },
  created() {},
  mounted() {
    this.setWordFontSize();
  },
  watch: {
    "letterData.content": {
      handler() {
        this.setWordFontSize();
      },
      immediate: true,
      deep: true,
    },
  },
};
</script>